<template>
  <view class="image-upload-box">
    <wd-card title="图片上传">
      <!-- 基础/风格图 选项-->
      <view v-if="workflowType !== WorkFlowTypeEnum.INSPIRATION_MOVE" class="flex justify-around">
        <view
          v-for="item in imgTabs"
          :key="item.value"
          class="tab-item"
          :class="item.value === currentTab ? 'item_active' : ''"
          @tap="onChangeTab(item)"
        >
          {{ item.label }}
        </view>
      </view>
      <view v-else>方案意向图</view>

      <!-- 上传区域 -->
      <view class="flex w-full h-[260rpx] bg-[#f6f6f7] mt-3 rounded-sm">
        <view class="relative flex-1" @tap="upload">
          <!-- 图片展示 -->
          <view :style="isShowImg ? '' : 'display:none;'" class="image-show">
            <wd-img
              :src="currentTab === ImgTabsEnum.BASIC ? imageObj.baseImgUrl : imageObj.styleImgUrl"
              height="100%"
              mode="heightFix"
            />
          </view>
          <view :style="!isShowImg ? '' : 'display:none;'" class="upload-icon">
            <wd-icon name="camera" size="60rpx" />
            <view>拍照/上传图片</view>
          </view>

          <view :style="isShowImg ? '' : 'display:none;'" class="delete-box gap-3" @tap.stop>
            <view class="flex items-center" @tap.stop="upload">
              <wd-icon name="folder-add" size="36rpx" color="#ffffff" />
              <text class="text-[#ffffff] pl-2">重新上传</text>
            </view>
            <view class="flex items-center" @tap.stop="onDeleteImage">
              <wd-icon name="delete-thin" size="36rpx" color="#c13432" />
              <text class="text-[#c13432] pl-2">删除图片</text>
            </view>
          </view>
        </view>
        <view
          class="w-[48rpx] h-full flex justify-center items-center bg-[#c13432]"
          @tap="isShowSideImg = true"
        >
          <wd-icon name="arrow-right" size="36rpx" color="#ffffff" />
        </view>
      </view>

      <!-- 我的线稿/模型/房间 -->
      <view v-show="rdTitle" class="flex mt-3 gap-3 text-#333333">
        <text>{{ rdTitle }}</text>
        <wd-radio-group v-model="imageParameters.rdType" inline shape="dot" checked-color="#c13432">
          <wd-radio v-for="item in rdOptions" :key="item.value" :value="item.value">{{
            item.label
          }}</wd-radio>
        </wd-radio-group>
      </view>

      <!-- 原图参数base -->
      <base-slider
        v-model:silder-num="imageParameters.originStrength.value"
        v-model:switch-checked="imageParameters.originStrength.checked"
        :style="isShowOriginStrength ? '' : 'display:none;'"
        title="原图"
        isShowSwitch
        :min="imageParameters.originStrength.min"
        :max="imageParameters.originStrength.max"
      />

      <!-- 风格参数 -->
      <base-slider
        v-if="isShowStyleStrength"
        v-model:silder-num="imageParameters.styleStrength.value"
        :disabled="!imageObj.styleImgUrl"
        title="风格"
      />

      <!-- 灵感迁移-相似度 -->
      <base-slider
        v-if="workflowType === WorkFlowTypeEnum.INSPIRATION_MOVE"
        v-model:silder-num="imageParameters.similarity"
        title="相似度"
      />

      <!-- 预设图片选择 -->
      <wd-popup
        v-model="isShowSideImg"
        position="right"
        custom-style="width: 400rpx;"
        root-portal
        :z-index="999"
      >
        <presets-img-box
          :current-flow="workflowType"
          :current-choose-template="templateChooseObj.currentTemplate.value"
          :current-img-tab="currentTab"
          :current-granularity="imageParameters.rdType"
          @onClickImg="onClickPresetImg"
        />
      </wd-popup>
    </wd-card>
  </view>
</template>
<script lang="ts" setup>
import UseUploadImg from "@/hooks/useUploadImg";
import PresetsImgBox from "@/components/PresetsImgBox.vue";
import BaseSlider from "@/components/BaseSlider.vue";
import { ImgTabsEnum, WorkFlowTypeEnum } from "@/utils/enums";
import { useWorkflowStore } from "@/store/index";
import { storeToRefs } from "pinia";

const { workflowType, templateChooseObj, imageObj, imageParameters, rdTitle, rdOptions } =
  storeToRefs(useWorkflowStore());

const imgTabs = [
  {
    label: "基础控制图",
    value: ImgTabsEnum.BASIC,
  },
  {
    label: "风格参考图",
    value: ImgTabsEnum.REFERENCE,
  },
];

/* 图片相关 */
// 控制对应图片显示
const isShowImg = computed(
  () =>
    (imageObj.value.baseImgUrl && currentTab.value === ImgTabsEnum.BASIC) ||
    (imageObj.value.styleImgUrl && currentTab.value === ImgTabsEnum.REFERENCE),
);

// 当前选择类型
const currentTab = ref(ImgTabsEnum.BASIC);
const onChangeTab = (item: { label: string; value: number }) => {
  currentTab.value = item.value;
};

// 本地上传图片
const { uploadImg } = new UseUploadImg();
const upload = async () => {
  const data = await uploadImg();
  if (currentTab.value === ImgTabsEnum.BASIC) {
    imageObj.value.baseImgUrl = (
      data.tempFiles as UniApp.ChooseImageSuccessCallbackResultFile[]
    )[0].path;
  } else {
    imageObj.value.styleImgUrl = (
      data.tempFiles as UniApp.ChooseImageSuccessCallbackResultFile[]
    )[0].path;
  }
};

// 侧边栏图片
const isShowSideImg = ref<boolean>(false);

// 点击侧边栏
const onClickPresetImg = (src: string) => {
  if (currentTab.value === ImgTabsEnum.BASIC) {
    imageObj.value.baseImgUrl = src;
  } else {
    imageObj.value.styleImgUrl = src;
  }
};

// 删除
const onDeleteImage = async () => {
  if (currentTab.value === ImgTabsEnum.BASIC) {
    imageObj.value.baseImgUrl = "";
  } else {
    imageObj.value.styleImgUrl = "";
  }
};

/* 图片参数相关 */
const isShowOriginStrength = computed(() => {
  const index = [
    WorkFlowTypeEnum.MODEL_RENDER,
    WorkFlowTypeEnum.OLD_BUILDING_REBUILD,
    WorkFlowTypeEnum.ROOM_REBUILD,
  ].indexOf(workflowType.value as WorkFlowTypeEnum);
  if (index > -1 && currentTab.value === ImgTabsEnum.BASIC) {
    return true;
  } else {
    return false;
  }
});

const isShowStyleStrength = computed(() => {
  const index = [WorkFlowTypeEnum.INSPIRATION_MOVE].indexOf(workflowType.value as WorkFlowTypeEnum);
  if (index < 0 && currentTab.value === ImgTabsEnum.REFERENCE) {
    return true;
  } else {
    return false;
  }
});
</script>
<script lang="ts">
// 取消小程序样式隔离
export default {
  options: { styleIsolation: "shared" },
};
</script>
<style lang="scss" scoped>
.image-upload-box {
  position: relative;

  .tab-item {
    position: relative;
    display: flex;
    gap: 16rpx;
    padding: 8rpx 16rpx;
    font-size: 28rpx;
    color: #333333;
    border: 2rpx dashed rgba(51, 51, 51, 0.7);
    border-radius: 16rpx;
    transition: all 0.2s linear;
  }

  .item_active {
    color: #c13432;
    background: #f3d6d6;
    border: 2rpx solid #c13432;
  }

  .upload-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .image-show {
    @apply relative w-full h-full flex justify-center z-6;
  }

  .delete-box {
    @apply absolute top-0 left-0 z-7 h-full w-full flex flex-col justify-center items-center;
    background-color: rgba(0, 0, 0, 0.4);
  }

  ::v-deep .wd-card {
    padding-bottom: 24rpx;
  }
}
</style>
